require.config({
	baseUrl: "./javascripts/library",
	path: {
		axios: "axios",
		countdown: "countdown",
		jquery: "jquery",
		slider: "slider",
		swiper: "swiper",
		tabs: "tabs",
	},
});

require(["jquery", "axios"], function ($, axios) {
	let cart = JSON.parse(localStorage.getItem("cart"));

	if (!cart) return;
	let product_id_list = cart.map((el) => {
		return el.id;
	});

	axios.get("/goods/cartlist", { params: { id_list: product_id_list } }).then((response) => {
		let data = response.data.data;
		let product_container = $("#main .cart-body .cart-floatbar");
		let temp = "";
		data.forEach((el) => {
			let img_src = JSON.parse(el.picture)[0].src;
			let current = cart.filter((elm) => {
				return elm.id == el.id;
			});
			temp += `					<div class="cart-tbody">
						<div class="shop">
							<div class="cart-checkbox">
								<input type="checkbox" class="jdcheckbox" name="checkshop" />
							</div>
							<span class="shop-text">
								<a href="" class="shop-name">微星京东自营旗舰店</a>
								<i class="btn-im"></i>
							</span>
							<div class="shop-extra">
								<span>
									<i class="icon-confirm"></i>
									<span class="ftx"> 以免运费 </span>
								</span>
								<a href=""> 试用PLUS立得1张运费券 > </a>
							</div>
						</div>
						<div class="item-list">
							<div class="item">
								<div class="item-form">
									<div class="cell p-checkbox">
										<div class="cart-checkbox">
											<input type="checkbox" class="jdcheckbox" />
										</div>
									</div>
									<div class="cell p-goods">
										<div class="p-img">
											<a href="">
												<img src="${img_src}" alt="" />
											</a>
										</div>
										<div class="p-msg">
											<div class="p-name">
												<a href="">${el.title}</a>
											</div>
											<div class="p-extend">
												<span class="jd-service-icon"></span>
												<span class="jd-service-text">选服务</span>
											</div>
										</div>
									</div>
									<div class="cell p-props">
										<div class="props-text">
											<span>${el.title}</span>
										</div>
									</div>
									<div class="cell p-price">
										<span class="p-price-cont"> ￥${parseFloat(el.price).toFixed(2)} </span>
										<p class="mt5">
											<span>限购一件</span>
										</p>
									</div>
									<div class="cell p-quantity">
										<div class="cart-num">
											<button disabled class="is-disbled cart-num-dec">-</button>
											<div class="cart-input">
												<input type="text" min="1" max="${el.num}" value="${current[0].num}" />
											</div>
											<button disabled class="is-disbled cart-num-inc">+</button>
										</div>
									</div>
									<div class="cell p-sum">
										<strong>¥${(el.price * current[0].num).toFixed(2)}</strong>
									</div>
									<div class="cell p-ops">
										<a href="" class="ops-item item-remove" data-id="${el.id}">删除</a>
										<a href="" class="ops-item">移入关注</a>
									</div>
								</div>
							</div>
						</div>
					</div>`;
		});
		product_container.before(temp);
		let item_list = $(".cart-tbody .item-remove");
		item_list.on("click", function () {
			let result = cart.filter((el) => {
				return el.id != $(this).attr("data-id");
			});
			localStorage.setItem("cart", JSON.stringify(result));
			location.reload();
		});
		let btns = $(".cart-tbody .item-form .jdcheckbox");
		let items = $(".cart-tbody .p-sum strong");
		btns.on("click", function () {
			let index = btns.index(this);
			if ($(this).prop("checked")) {
				items.eq(index).addClass("checked");
			} else {
				items.eq(index).removeClass("checked");
			}
			let checked = $(".cart-tbody .checked");
			let price_total = $(".cart-body .w .cart-floatbar .price em");
			let price = 0;
			checked.each((index, el) => {
				let p = parseFloat($(el).text().slice(1));
				price += p;
			});
			price_total.html(`￥${price.toFixed(2)}`);
		});
	});
});
